<template>
  <div class="ai-questionnaire-container">
    <!-- 页面标题 -->
    <div class="page-header">
      <h1 class="page-title">AI生成问卷</h1>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <!-- 上半部分：问卷生成区域 -->
      <div class="upper-section">
        <!-- 主要提示/输入区域 -->
        <div class="prompt-area">
          <div class="prompt-button">
            <span
              >帮我生成一个考核三亚崖州区出生一件事政务工作技能的调研问卷</span
            >
          </div>
        </div>

        <!-- 问卷要求分析 -->
        <div class="requirements-section">
          <h3 class="section-title">
            根据问题分析, 当前任务是优化此前生成的政务工作技能调研问卷,
            需要重点关注:
          </h3>
          <div class="requirements-list">
            <div class="requirement-item">
              <span class="requirement-number">1.</span>
              <span class="requirement-label">专业性 (Professionalism):</span>
              <span class="requirement-content"
                >需体现'出生一件事'改革政策背景</span
              >
            </div>
            <div class="requirement-item">
              <span class="requirement-number">2.</span>
              <span class="requirement-label">地域性 (Regionality):</span>
              <span class="requirement-content"
                >突出三亚崖州区特色服务场景</span
              >
            </div>
            <div class="requirement-item">
              <span class="requirement-number">3.</span>
              <span class="requirement-label">实用性 (Practicality):</span>
              <span class="requirement-content">增加行为观察类评估指标</span>
            </div>
            <div class="requirement-item">
              <span class="requirement-number">4.</span>
              <span class="requirement-label">时效性 (Timeliness):</span>
              <span class="requirement-content"
                >结合2025年最新电子证照应用要求</span
              >
            </div>
          </div>
        </div>

        <!-- 问卷升级特点 -->
        <div class="features-section">
          <h3 class="section-title">该问卷升级版具有三大特点:</h3>
          <div class="features-list">
            <div class="feature-item">
              <span class="feature-number">1.</span>
              <span class="feature-content"
                >设置崖州特有的'渔船民服务'情景题</span
              >
            </div>
            <div class="feature-item">
              <span class="feature-number">2.</span>
              <span class="feature-content"
                >新增2025年全省推广的'刷脸办'技能评估</span
              >
            </div>
            <div class="feature-item">
              <span class="feature-number">3.</span>
              <span class="feature-content"
                >采用'能力描述+情景模拟+开放作答'的立体评估结构,
                建议配套使用'神秘顾客'实地暗访验证。是否需要增加母婴设施协助等细分场景评估?</span
              >
            </div>
          </div>
        </div>

        <!-- 反馈选项 -->
        <div class="feedback-section">
          <div class="feedback-icon">
            <i class="el-icon-warning"></i>
          </div>
          <span class="feedback-text">不满意? 修改下方需求重新分析</span>
        </div>

        <!-- 开始生成按钮 -->
        <div class="action-section">
          <button class="generate-button" @click="startGeneration">
            <i class="el-icon-star-on"></i>
            <span>+ 开始生成</span>
          </button>
        </div>
      </div>

      <!-- 下半部分：知识库管理区域 -->
      <div class="lower-section">
        <!-- 重复的提示区域 -->
        <div class="prompt-area">
          <div class="prompt-button">
            <span
              >帮我生成一个考核三亚崖州区出生一件事政务工作技能的调研问卷</span
            >
          </div>
        </div>

        <!-- 关联知识库 -->
        <div class="knowledge-base-section">
          <h3 class="section-title">+ 关联知识库</h3>

          <!-- 文档网格 -->
          <div class="documents-grid">
            <div
              class="document-card"
              v-for="(doc, index) in documents"
              :key="index"
            >
              <div class="document-icon">
                <i
                  :class="
                    doc.type === 'pdf'
                      ? 'el-icon-document'
                      : 'el-icon-document-copy'
                  "
                ></i>
              </div>
              <div class="document-info">
                <div class="document-size">{{ doc.size }}</div>
                <div class="document-name">{{ doc.name }}</div>
              </div>
              <div class="document-remove" @click="removeDocument(index)">
                <i class="el-icon-close"></i>
              </div>
            </div>
          </div>
        </div>

        <!-- 提交按钮 -->
        <div class="submit-section">
          <button class="submit-button" @click="submit">
            <i class="el-icon-s-promotion"></i>
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "AIQuestionnaire",
  data() {
    return {
      documents: [
        { type: "pdf", size: "326.46 k", name: "三亚市人民政府办公室关" },
        { type: "docx", size: "326.46 k", name: "三亚市人民政府办公室关" },
        { type: "pdf", size: "326.46 k", name: "三亚市人民政府办公室关" },
        { type: "docx", size: "326.46 k", name: "三亚市人民政府办公室关" },
        { type: "pdf", size: "326.46 k", name: "三亚市人民政府办公室关" },
        { type: "docx", size: "326.46 k", name: "三亚市人民政府办公室关" },
        { type: "pdf", size: "326.46 k", name: "三亚市人民政府办公室关" },
        { type: "docx", size: "326.46 k", name: "三亚市人民政府办公室关" },
        { type: "pdf", size: "326.46 k", name: "三亚市人民政府办公室关" },
      ],
    };
  },
  methods: {
    // 开始生成问卷
    startGeneration() {
      console.log("开始生成问卷");
    },

    // 提交
    submit() {
      console.log("提交");
    },

    // 移除文档
    removeDocument(index) {
      this.documents.splice(index, 1);
    },
  },
};
</script>

<style scoped>
.ai-questionnaire-container {
  min-height: 100vh;
  background: #f5f7fa;
  padding: 20px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.page-header {
  margin-bottom: 20px;
}

.page-title {
  font-size: 24px;
  font-weight: 600;
  color: #303133;
  margin: 0;
}

.main-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

/* 上半部分样式 */
.upper-section {
  background: white;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.prompt-area {
  margin-bottom: 25px;
}

.prompt-button {
  display: inline-block;
  background: #409eff;
  color: white;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.3s;
}

.prompt-button:hover {
  background: #337ecc;
}

.requirements-section,
.features-section {
  margin-bottom: 25px;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  margin: 0 0 15px 0;
  line-height: 1.5;
}

.requirements-list,
.features-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.requirement-item,
.feature-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.6;
}

.requirement-number,
.feature-number {
  color: #409eff;
  font-weight: 600;
  min-width: 20px;
}

.requirement-label {
  color: #606266;
  font-weight: 500;
  min-width: 120px;
}

.requirement-content,
.feature-content {
  color: #303133;
  flex: 1;
}

.feedback-section {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 25px;
  padding: 15px;
  background: #fff7e6;
  border-radius: 8px;
  border: 1px solid #ffd591;
}

.feedback-icon {
  color: #fa8c16;
  font-size: 18px;
}

.feedback-text {
  color: #d46b08;
  font-size: 14px;
}

.action-section {
  display: flex;
  justify-content: center;
}

.generate-button {
  background: #409eff;
  color: white;
  border: none;
  padding: 15px 30px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background-color 0.3s;
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
}

.generate-button:hover {
  background: #337ecc;
}

.generate-button i {
  font-size: 18px;
}

/* 下半部分样式 */
.lower-section {
  background: #e6f7ff;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  position: relative;
}

.knowledge-base-section {
  margin-top: 25px;
}

.documents-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  margin-top: 20px;
}

.document-card {
  background: white;
  border-radius: 8px;
  padding: 15px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s;
  cursor: pointer;
  position: relative;
}

.document-card:hover {
  transform: translateY(-2px);
}

.document-icon {
  color: #409eff;
  font-size: 20px;
  flex-shrink: 0;
}

.document-info {
  flex: 1;
  min-width: 0;
}

.document-size {
  font-size: 12px;
  color: #909399;
  margin-bottom: 4px;
}

.document-name {
  font-size: 13px;
  color: #303133;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.document-remove {
  color: #f56c6c;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: background-color 0.2s;
  flex-shrink: 0;
}

.document-remove:hover {
  background: #fef0f0;
}

.submit-section {
  position: absolute;
  top: 30px;
  right: 30px;
}

.submit-button {
  background: #409eff;
  color: white;
  border: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  transition: background-color 0.3s;
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
}

.submit-button:hover {
  background: #337ecc;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .ai-questionnaire-container {
    padding: 15px;
  }

  .upper-section,
  .lower-section {
    padding: 20px;
  }

  .documents-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .requirement-item,
  .feature-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .requirement-label {
    min-width: auto;
  }
}

@media (max-width: 480px) {
  .documents-grid {
    grid-template-columns: 1fr;
  }

  .generate-button {
    padding: 12px 20px;
    font-size: 14px;
  }

  .submit-button {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }
}
</style>
